<template>
	<view class="overflow-hidd e-rela" :class="customClass" :style="customStyle" @tap="$emit('tapGoods')">
		<view class="goods-img e-rela" v-if="option.layoutType > 2 && option.layoutType < 6">
			<image mode="aspectFill" style="width: 100%;height:100%" :src="$fullLink(info.coverImg)">
			</image>
			<view class="explain e-font-24 e-abso" :style="explainStyle" v-if="option.explainShow && info.explainText">
				<text>{{ info.explainText }}</text>
			</view>
		</view>

		<view class="bg-white goods-img-wrapper e-rela" v-else>
			<image :mode="option.layoutType === 1 ?'aspectFill' :'widthFix'" class="goods-img" :src="$fullLink(info.coverImg)">
			</image>
			<view class="explain e-font-24 e-abso" :style="explainStyle" v-if="option.explainShow && info.explainText">
				<text>{{ info.explainText }}</text>
			</view>
			<!-- 标签信息 -->
			<goods-label :info="info" v-if="labelShow&& option.layoutType < 3"></goods-label>
		</view>
		<template v-if="option.signType > 0">
			<view v-if="option.signType == 1" class="sign e-abso">
				<text class="c-primary iconfont badge-iconfont"
					:class="[`icon-jiaobiao${option.signIconName + 1}`, `badge-size${option.signIconName}`]"></text>
				<text class="e-font-40 c-white badge-text">{{ option.signText }}</text>
			</view>
			<image mode="aspectFill" v-else class="sign-icon e-abso" :src="option.signIconUrl">
			</image>
		</template>

		<!-- 标签信息 -->
		<goods-label :info="info" v-if="labelShow && option.layoutType > 2"></goods-label>
	
		<view class="goods-body e-rela " :style="[{ backgroundColor: option.goodsBackgroundColor }]">
			<view class="goods-title" :style="[{ color: option.titleColor }]" v-if="option.titleShow">
				{{ info.name }}
			</view>
			<template v-if="labelShow">
				<!-- 标签信息 -->
				<labelBadge :info="info"></labelBadge>
				<!-- 活动信息 -->
				<activityBadge :info="info"></activityBadge>
			</template>

			<slot name="price">
				<view class="goods-price">
					<view class="price fw-500" :style="[{ color: option.priceColor }]" v-if="option.priceShow">
						<text>{{$unitEn}}</text>
						<text>{{ info.price }}</text>
					</view>
					<text class="scribe e-rela" :style="[{ color: option.scribeColor, '--color': option.scribeColor }]"
						v-if="option.scribeShow && option.layoutType < 3&&info.priceScribing">
						{{$unitEn}}{{ info.priceScribing }}
					</text>
					<view class="sales" :style="[{ color: option.salesColor }]" v-if="salesShow">
						<text>{{ $t('common.销量') }}：</text>
						<text>{{ $formatNumberToK(info.stockSold) }}</text>
					</view>
				</view>
			</slot>

			<template v-if="buttonShow">
				<view class="text-button e-abso "  :style="[textButtonStyle]"
					v-if="option.buttonType == 1">
					{{ option.buttonText }}
				</view>
				<view class="add-icon-button e-abso text-center"  :style="[addIconStyle]"
					v-else-if="option.buttonType == 2">
					<text class="iconfont icon-jia"></text>
				</view>
				<view class="car-icon-button e-abso text-center" 
					:style="[{ color: option.carIconColor }]" v-else-if="option.buttonType == 3">
					<text class="iconfont icon-gouwuche2"></text>
				</view>
				<view class="car-icon-button-circular e-abso text-center" 
					:style="[carIconStyle]" v-else-if="option.buttonType == 4">
					<text class="iconfont icon-gouwuche"></text>
				</view>
			</template>
			<view class="e-p-20 " v-if="option.layoutType === 1&&option.storeShow">
				<view class="e-flex bg-f7 e-radius-20 e-p-20">
					<view class="e-flex-xy-center">
						<image v-if="info.storeLogo" class="img-36" :src="$fullLink(info.storeLogo)"
							mode="aspectFit"></image>
						<image v-else class="img-36" :src="$staticPath('store-white.png')" alt=""></image>
					</view>
					<text class="e-font-24 e-p-l-32" >{{ info.storeName }}</text>
				</view>
			</view>
		</view>
	</view>


</template>
<script lang="ts">
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true,
			// 允许页面样式影响当前组件样式
			styleIsolation: 'shared'
		}
		// #endif
	}
</script>
<script lang="ts" setup>
	import type { GoodsItem } from '@/common/request/api'
	import labelBadge from './label-badge.vue'
	import goodsLabel from './goods-label.vue'
	import { computed } from 'vue'

	const props = defineProps<{
		info : GoodsItem & { explainText ?: string }
		salesShow : boolean
		buttonShow : boolean
		labelShow : boolean
		customClass ?: string | string[]
		customStyle : Record<string, any> | Record<string, any>[]
		textButtonStyle : Record<string, any>
		addIconStyle : Record<string, any>
		carIconStyle : Record<string, any>
		option : {
			// 布局
			layoutType : 1 | 2 | 3 | 4 | 5 | 6 | 7
			//是否显示商品标题
			titleShow : boolean
			//商品标题文本颜色
			titleColor : string
			//是否显示商品价格
			priceShow : boolean
			//商品价格文本颜色
			priceColor : string
			//是否显示划线原价
			scribeShow : boolean
			//划线原价文本颜色
			scribeColor : string
			//是否显示商品销量
			salesShow : boolean
			//商品销量文本颜色
			salesColor : string
			//是否显示购物车按钮
			buttonShow : boolean
			//购物车按钮样式类型，详见设计稿
			buttonType : 1 | 2 | 3 | 4
			//购物车按钮文本 仅buttonType为1生效
			buttonText : string
			//图标颜色 仅buttonType为3生效
			carIconColor : string,
			//商品背景
			goodsBackgroundColor : string
			//活动角标 0不显示 1系统图标 2自定义
			signType : 0 | 1 | 2
			//活动角标文本
			signText : string
			// 对应活动角标，详见设计稿
			signIconName : 0 | 1 | 2
			//自定义活动角标图片地址
			signIconUrl : string
			//为您推荐组件的商品说明显示控制
			explainShow ?: boolean
			// 为您推荐组件的商品说明文本颜色
			explainTextColor ?: string
			// 为您推荐组件的商品说明背景颜色
			explainBackgroundColor ?: string
			// 显示店铺
			storeShow?:boolean
		}
	}>()

	const explainStyle = computed(() => {
		return {
			color: props.option.explainTextColor,
			backgroundColor: props.option.explainBackgroundColor
		}
	})
</script>

<style lang="scss">
	@import '@/components/list/css/layoutGoods.scss';
</style>